<template>
  <div>
    <div>
      <van-nav-bar
        :border="false"
        title="提交订单"
        left-arrow
        @click-left="onClickLeft"
        class="nav"
      >
      </van-nav-bar>
      <ul class="datas">
        <li>
          <img src="../../assets/img/details/datas.png" alt="" />
          <span>商品信息</span>
        </li>
        <li>
          <img
            class="datas-img"
            :src="`http://localhost:2020/uploads/${form.avatar}`"
            alt=""
          />
          <span class="course">[课程]{{ form.name }}-{{ form.majorcid }}</span>
          <span class="price">￥ {{ form.price }}</span>
        </li>
        <li>
          <b class="num">1个</b>
          商品
          <div class="min-price-warp">
            <span>小计</span>
            <span>￥</span>
            <span class="min-price"> {{ form.price }}</span>
          </div>
        </li>
      </ul>
      <ul class="datas pattern">
        <li>
          <img id="mony-img" src="../../assets/img/details/mony.png" alt="" />
          <span>商品信息</span>
        </li>
        <li>
          <img
            class="datas-img moy-img"
            src="../../assets/img/details/moy.png"
            alt=""
          />
          <span class="course" id="surplus">账户余额不足 ￥0.00</span>
          <input class="ipt" type="checkbox" name="" id="" />
        </li>
        <li id="tow-li">
          <img
            class="datas-img moy-img"
            src="../../assets/img/details/weixin.png"
            alt=""
          />
          <span class="course" id="surplus">微信</span>
          <input class="ipt" checked type="checkbox" name="" id="" />
        </li>
        <li id="s-li">
          <img
            class="datas-img moy-img"
            src="../../assets/img/details/zhifubao.png"
            alt=""
            style="margin-top: 0.3rem"
          />
          <span class="course" style="margin-top: 0.3rem" id="surplus"
            >支付宝</span
          >
          <input class="ipt" type="checkbox" name="" id="" />
        </li>
        <li id="choice-li">
          <div class="choice">
            <span>! 账户余额不足，选择账户支付</span>
            <span>立即充值 ></span>
          </div>
        </li>
        <li id="choice-li">
          <div class="text">
            点击去支付后，如有优惠券，将和此订单绑定，优惠券将设置成已使用
          </div>
        </li>
      </ul>
    </div>
    <div class="btn-warp">
      <button class="sf">
        <span>实付</span>
        <span>￥ {{ form.price }}</span>
      </button>
      <button class="zf" @click="buyFun">
        <span>去支付</span>
      </button>
    </div>
  </div>
</template>

<script>
import "../../css/details/order.css";
import { Toast, Dialog } from "vant";

import { mapActions, mapState } from "vuex";

export default {
  data() {
    return {
      form: {},
      course: {},
    };
  },
  methods: {
    ...mapActions("details", ["getCourse", "addCourse"]),
    onClickLeft() {
      this.$router.push({
        name: "Datas",
        params: {
          form: this.$route.params.form,
        },
      });
    },
    buyFun() {
      Dialog.confirm({
        // title: "标题",
        message: "确认购买吗？",
      })
        .then(() => {
          let arr = [];
          let idArr = [];
          this.uidArr.map((v) => {
            arr.push(v.cid);
            idArr.push(v.uid);
          });
          if (
            arr.length ||
            idArr.indexOf(this.$route.params.uid.toString()) == -1
          ) {
            if (arr.indexOf(this.form.id.toString()) == -1) {
              this.addCourse(this.course);
              Toast("支付成功");
            } else {
              Toast("您已经报名了此课程");
            }
          }
          this.$router.push("/");
        })
        .catch(() => {
          Toast("您已取消购买");
        });
    },
  },
  mounted() {
    this.form = this.$route.params.form;
    this.course = {
      cid: this.form.id,
      name: this.form.name,
      price: this.form.price,
      majorcid: this.form.majorcid,
      avatar: this.form.avatar,
      uid: this.$route.params.uid,
    };
    this.getCourse(this.$route.params.uid);
  },
  computed: {
    ...mapState("details", ["uidArr"]),
  },
  components: {
    vanToast: Toast,
    vanDialog: Dialog,
  },
};
</script>

<style scoped></style>
